<template>
    <div>子级组件</div>
    <button @click="update">更新数据</button>
    <p> {{ msg }}</p>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue';

export default defineComponent({
  name: 'App',
  components: {},
  props: ['isShow'],
  setup(props) {
    const msg = ref('初始数据')
    const update = () => {
      msg.value += '我更新了'
    }

    //3.0生命周期
    console.log('setup 代替beforeCreate&created')
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(()=>{
      console.log('onBeforeUnmount')
    })
    onUnmounted(()=>{
      console.log('onUnmounted')
    })

    return {
      msg,
      update,
    }
  }
});
</script>

<style>

</style>
